<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/mycss.css">
    <script src="js/echarts.min.js"></script>
    <script src="js/highcharts.js"></script>
    <script src="js/highcharts-3d.js"></script>
    <script src="js/exporting.js"></script>
</head>

<body>
    <div class="left">

        <div style="width: 100%;float: left;">
            <span style="color: white;margin-left: 10px;width: 640px;line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">监测组</span>
            <span style="color: white;float: right;line-height: 28px;margin-right: 60px;">个</span><span
                style="color: #f25b6d;font-size: 28px;float: right;margin-right: 20px;font-weight: bold;line-height: 28px;">56</span>
        </div>
        <div style="width: 90%;background-color: #fff;;float: left;height: 1px;margin-left: 30px;margin-top: 10px;">
        </div>

        <div style="width: 100%;float: left;">
            <div id="jiancedian" class="jiancezu"></div>
            <div id="yujingcishu" class="jiancezu"></div>
            <div id="xunchacishu" class="jiancezu"></div>
            <div id="shebeizaixian" class="jiancezu"></div>
        </div>
        <div style="width: 100%;float: left;margin-left: 35px;">
            <span class="jiancezuTip">监测点数量</span>
            <span class="jiancezuTip">预警次数</span>
            <span class="jiancezuTip">巡查次数</span>
            <span class="jiancezuTip">设备在线率</span>
        </div>
        <div style="width: 100%;float: left;">
            <div id="point"></div>
            <div style="float: left;width: 10%;height: 100%;margin-top: 50px;margin-left: 10px;">
                <span class="jiancedian_tag" style="color: red;border: 1px solid red;">故障</span>
                <span class="jiancedian_tag" style="color: green;border: 1px solid green;">正常</span>
                <span class="jiancedian_tag" style="color: green;border: 1px solid green;">正常</span>
                <span class="jiancedian_tag" style="color: green;border: 1px solid green;">正常</span>
                <span class="jiancedian_tag" style="color: green;border: 1px solid green;">正常</span>
                <span class="jiancedian_tag" style="color: green;border: 1px solid green;">正常</span>
                <span class="jiancedian_tag" style="color: red;border: 1px solid red;">故障</span>
            </div>
        </div>

        <div style="width: 100%;float: left;">

            <span style="color: white;margin-left: 10px;width: 340px;
            line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">监测设备</span>
            <span style="color: white;float: right;line-height: 28px;margin-right: 60px;">个</span><span
                style="color: #f25b6d;font-size: 28px;float: right;margin-right: 20px;font-weight: bold;line-height: 28px;">84202</span>
        </div>
        <div style="width: 90%;background-color: #fff;;float: left;height: 1px;margin-left: 30px;margin-top: 10px;">
        </div>
        <div id="container" style="height: 400px;float: left;background-color: transparent;"></div>
    </div>

    <div class="center">
        <div class="num_area">
            <span>1</span>
            <span>6</span>
            <span>9</span>
            <span>8</span>
            <span>0</span>
        </div>
        <span
            style="color: white;font-size: 20px;text-align: center; float: left;width: 100%;margin-top: 50px;">监测点总数</span>
        <div style="width: 100%;float: left;margin-top: 150px;">
            <span style="color: white;margin-left: 10px;width: 340px;
            line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">一年内预警</span>
            <span style="color: white;float: right;line-height: 28px;margin-right: 60px;">条</span><span
                style="color: #f25b6d;font-size: 28px;float: right;margin-right: 20px;font-weight: bold;line-height: 28px;">154381</span>
        </div>
        <div style="width: 90%;background-color: #fff;;float: left;height: 1px;margin-left: 30px;margin-top: 10px;">
        </div>
        <div id="centerBottom"></div>
    </div>

    <div class="right">
        <div class="right_first">
            <span style="color: white;margin-left: 10px;width: 340px;
            line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">气体类型分布</span>
            <div style="width: 90%;background-color: #fff;;float: left;height: 1px;margin-left: 30px;margin-top: 10px;">
            </div>
            <div id="type_pie" style="height: 100%;"></div>
        </div>
        <div class="right_second">
            <span style="color: white;margin-left: 10px;width: 340px;
            line-height: 40px;
            background: linear-gradient(90deg, #28458F 0%, #020F30 100%);padding-left: 10px;">待处理预警</span>
            <div style="width: 90%;background-color: #fff;;float: left;height: 1px;margin-left: 30px;margin-top: 10px;">
            </div>
            <div id="type_leida"
                style="height: 100%;margin-top: 80px;background: url('../images/line\(1\).png')  rgba(255, 255, 255, 0.03);">
                <table>
                    <thead>
                        <tr style="color: white;">
                            <th>预警设备</th>
                            <th>预警等级</th>
                            <th>预警时间</th>
                        </tr>
                    </thead>

                    <tbody style="text-align: center;color: white;" class="yujing">
                        <tr>
                            <td>Thing1</td>
                            <td class="tip" style="color: #FF3962;"><img src="images/red.gif" alt="" srcset=""
                                    width="15" height="15"> 红色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing2</td>
                            <td class="tip" style="color: #EFE058;">黄色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing3</td>
                            <td class="tip" style="color: #09EDBA;">绿色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing4</td>
                            <td class="tip" style="color: #EFE058;">黄色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing5</td>
                            <td class="tip" style="color: #4075FF;">蓝色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing6</td>
                            <td class="tip" style="color: #09EDBA;">绿色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing7</td>
                            <td class="tip" style="color: #4075FF;">蓝色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing8</td>
                            <td class="tip" style="color: #4075FF;">蓝色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing9</td>
                            <td class="tip" style="color: #09EDBA;">绿色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                        <tr>
                            <td>Thing10</td>
                            <td class="tip" style="color: #EFE058;">黄色预警</td>
                            <td>2021-7-10 15:02</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        $(document).ready(function () {
            var jiance1 = document.getElementById('jiancedian')
            var chart1 = echarts.init(jiance1);
            var option1;

            option1 = {
                title: {
                    text: '23个',
                    top: '42%',
                    left: '35%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: '700'
                    }
                },
                color: ['#081240', '#5771fd'],
                series: [
                    {
                        name: '监测点数量',
                        type: 'pie',
                        startAngle: 0,
                        radius: ['50%', '70%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, },
                            { value: 85, },
                        ]
                    }
                ]
            };

            option1 && chart1.setOption(option1);

            var jiance2 = document.getElementById('yujingcishu')
            var chart2 = echarts.init(jiance2);
            var option2;

            option2 = {
                title: {
                    text: '123次',
                    top: '42%',
                    left: '33%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: '700'
                    }
                },
                color: ['#081240', '#36a9f5'],
                series: [
                    {
                        name: '预警次数',
                        type: 'pie',
                        startAngle: 0,
                        radius: ['50%', '70%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, },
                            { value: 85, },
                        ]
                    }
                ]
            };

            option2 && chart2.setOption(option2);

            var jiance3 = document.getElementById('xunchacishu')
            var chart3 = echarts.init(jiance3);
            var option3;

            option3 = {
                title: {
                    text: '321次',
                    top: '42%',
                    left: '33%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: '700'
                    }
                },
                color: ['#081240', '#f25b6d'],
                series: [
                    {
                        name: '巡查次数',
                        type: 'pie',
                        startAngle: 0,
                        radius: ['50%', '70%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, },
                            { value: 85, },
                        ]
                    }
                ]
            };

            option3 && chart3.setOption(option3);



            var jiance4 = document.getElementById('shebeizaixian')
            var chart4 = echarts.init(jiance4);
            var option4;

            option4 = {
                title: {
                    text: '90%',
                    top: '42%',
                    left: '33%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: '700'
                    }
                },
                color: ['#081240', '#34cd7d'],
                series: [
                    {
                        name: '设备在线率',
                        type: 'pie',
                        startAngle: 0,
                        radius: ['50%', '70%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 15, },
                            { value: 85, },
                        ]
                    }
                ]
            };

            option4 && chart4.setOption(option4);

            var pointDiv = document.getElementById('point');
            var pointChart = echarts.init(pointDiv);
            var option5;
            var seriesLabel = {
                show: true,
                formatter: function (param) {
                    return '已运行 ' + param.value + ' 天';
                }
            }

            option5 = {
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['监测点七', '监测点六', '监测点五', '监测点四', '监测点三', '监测点二', '监测点一'],
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [{
                    data: [49, 73, 73, 86, 102, 123, 154],
                    type: 'bar',
                    label: seriesLabel,
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: '#77E8F2'
                            }, {
                                offset: 1,
                                color: '#4075FF'
                            }]),
                            shadowColor: 'rgba(0, 0, 0, 0.4)',
                            shadowBlur: 20
                        }
                    }

                }],
                grid: {
                    left: '15%'
                }
            };

            option5 && pointChart.setOption(option5);

            var chart = Highcharts.chart('container', {
                title: {
                    text: null
                },
                chart: {
                    type: 'pie',
                    backgroundColor: 'rgba(255, 255, 255, 0)',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                exporting: {
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        cursor: 'pointer',
                        depth: 55,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '设备在线率',
                    data: [
                        ['在线设备', 82101],
                        ['离线设备', 21010],
                    ],
                    colors: ['#01a4f4', '#52e5d0']
                }]
            });

            var centerBottomDiv = document.getElementById('centerBottom');
            var centerBottomChart = echarts.init(centerBottomDiv);
            var centerBottomOption;

            centerBottomOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['二氧化碳', '甲烷', '氧化亚氮', '氢氟碳化物', '全氟碳化物', '六氟化硫'],
                    textStyle: {
                        color: '#fff'
                    },
                    top: '7%'
                },
                grid: {
                    // left: '3%',
                    // right: '4%',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        name: '二氧化碳',
                        type: 'line',
                        stack: '总量',
                        data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230],
                        itemStyle: {
                            color: '#FF3962'
                        }
                    },
                    {
                        name: '甲烷',
                        type: 'line',
                        stack: '总量',
                        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330],
                        itemStyle: {
                            color: '#40FAFF'
                        }
                    },
                    {
                        name: '氧化亚氮',
                        type: 'line',
                        stack: '总量',
                        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330],
                        itemStyle: {
                            color: '#EFE058'
                        }
                    },
                    {
                        name: '氢氟碳化物',
                        type: 'line',
                        stack: '总量',
                        data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330],
                        itemStyle: {
                            color: '#4075FF'
                        }
                    },
                    {
                        name: '全氟碳化物',
                        type: 'line',
                        stack: '总量',
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330],
                        itemStyle: {
                            color: '#FF8B40'
                        }
                    },
                    {
                        name: '六氟化硫',
                        type: 'line',
                        stack: '总量',
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330],
                        itemStyle: {
                            color: '#3EC23A'
                        }
                    }
                ]
            }

            centerBottomOption && centerBottomChart.setOption(centerBottomOption);


            var typePieDiv = document.getElementById('type_pie');
            var typePieChart = echarts.init(typePieDiv);
            var pieOption;

            pieOption = {
                legend: {
                    x: 'right',
                    orient: 'vertical',
                    top: '4%',
                    textStyle: {
                        color: function () {
                            var colors = ['#FF3962', '#363de0', '#a31bba', '#4b3ef3', '#c7a226', '#63b7f0'];
                            for (var i = 0; i < colors.length; i++) {
                                return colors[i];
                            }
                        }
                    }
                },
                color: ['#FF3962', '#FEA352', '#EFE058', '#33D9E2', '#4075FF', '#886CF7'],
                series: [
                    {
                        name: '面积模式',
                        type: 'pie',
                        radius: [20, 100],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: [
                            { value: 40, name: 'CO2' },
                            { value: 38, name: 'CH4' },
                            { value: 32, name: 'N2O' },
                            { value: 30, name: 'HFCs' },
                            { value: 28, name: 'PFCs' },
                            { value: 26, name: 'SF6' },
                        ]
                    }
                ],
                grid: {
                    top: '3%'
                }
            };

            pieOption && typePieChart.setOption(pieOption);
        })
    </script>
</body>

</html>